<template>
  <div class="cs-step" :class="hasRecordData ? '' : 'noDataMsg_center'">
    <div id="box" :style="boxWidth" v-if="hasRecordData">
      <div class="stepBox" v-for="(item, index) in recordData" :key="index">
        <!-- 进度条圆和线 -->
        <div class="circle" :class="levelClass1(item.level)">
          <div class="stepLine"></div>
        </div>
        <div
          class="stepBox_normalStyle"
          :class="detailId === item.id ? 'box_active' : ''"
          @click="moreBtnClick(item.id)"
        >
          <div>
            <div class="stepBox_numberContent">
              <!-- 数值盒子 -->
              <cs-warning-label :level="item.level" :percent="item.percent" />
              <div class="moreLinkBox">
                <!-- <cs-btn btnText="更多" @click.native="moreBtnClick" /> -->
                <el-link type="info" @click="moreBtnClick(item.id)">更多</el-link>
              </div>
            </div>

            <!-- 时间 -->
            <span class="carInfoText">{{ item.time }}</span
            ><br />
            <!-- 车辆型号 -->
            <span class="carInfoText">{{ item.carModel }}</span>
          </div>
        </div>
      </div>
    </div>
    <span v-else class="noDataMsg">暂无数据</span>
  </div>
</template>

<script>
import csWarningLabel from '@/components/cs-warningLabel/cs-warningLabel.vue'
// import csBtn from '@/components/cs-btn/cs-btn.vue'

export default {
  components: {
    csWarningLabel
    // csBtn
  },
  props: {
    recordData: {
      type: Array,
      default() {
        return []
      }
    },
    detailId: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      hasRecordData: false
    }
  },
  watch: {
    recordData(newValue) {
      console.log(this.recordData.length)
      if (newValue.length) {
        this.hasRecordData = true
      } else {
        this.hasRecordData = false
      }
    }
  },
  computed: {
    boxWidth() {
      return `width: ${186 * this.recordData.length}px`
    }
  },
  methods: {
    levelClass1(carLevel) {
      if (carLevel === 'success') {
        return 'success1'
      } else if (carLevel === 'warning') {
        return 'warning1'
      } else if (carLevel === 'serious') {
        return 'serious1'
      } else {
        return 'danger1'
      }
    },
    moreBtnClick(id) {
      this.$emit('handleMoreBtnClick', id)
    }
  }
}
</script>

<style scoped>
.cs-step {
  display: flex;
  align-items: center;
  width: 1008px;
  height: 166px;
  background-color: #f3f9ff;
  padding-left: 15px;
  padding-right: 15px;
  overflow-x: scroll;
}

.noDataMsg_center {
  justify-content: center;
}

#box {
  display: flex;
  align-items: center;
}

.stepBox {
  position: relative;
  width: 186px;
  height: 124px;
}

.stepBox_normalStyle {
  position: absolute;
  top: 14px;
  left: -8px;
  padding-left: 8px;
  width: 180px;
  height: 114px;
  cursor: pointer;
}

.box_active {
  background-color: #d1e7ff;
}

.stepBox_numberContent {
  display: flex;
}

.moreLinkBox {
  display: flex;
  align-items: center;
}

.el-link {
  margin-left: 10px;
  /* position: absolute;
  top: 18px;
  right: 0px; */
}

.circle {
  position: relative;
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.stepLine {
  position: absolute;
  top: 4px;
  left: 10px;
  transform: scale(1);
  width: 176px;
  height: 1px;
  background-color: #dfdfdf;
}

.carInfoText {
  display: inline-block;
  font-size: 18px;
  margin-bottom: 10px;
}

/* 等级对应的样式 */

.success1 {
  background-color: #00c952;
}

.warning1 {
  background-color: #f7b503;
}

.serious1 {
  background-color: #f56606;
}

.danger1 {
  background-color: #de2020;
}
</style>
